<template>
	<div>
		<div class="search">
			<input class="search-input" 
				type="text"
				placeholder="输入城市名或拼音" 
				v-model="keyword"
				/>
		</div>
		<div class="search-content" 
			ref="search"
			v-show="keyword"
			>
			<ul>
				<li v-for="item of list"
					class="search-item border-bottom"
					:key="item.id"
					@click="handleCityClick(item.name)"
				>
					{{item.name}}
				</li>
				<li class="search-item border-bottom" 
					v-show="hasNoData">
					没有找到匹配数据
				</li>
			</ul>
		</div>
	</div>
	
</template>

<script>
	import BScroll from 'better-scroll'
	
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:'CitySearch',
		props:{
			cities:Object
		},
		data(){
			return {
				keyword:'',
				list:[],
				timer:null
			}
		},
		computed: {
			hasNoData () {
				return (this.list.length == 0)
			}
		},
		watch:{
			keyword(){
				if(this.timer){
					clearTimeout(this.timer)
				}
				if(!this.keyword || this.keyword == ''){
					this.list = []
					reutrn
				}
				this.timer = setTimeout(() => {
					const result = []
					for(let i in this.cities){
						this.cities[i].forEach((value) => {
							if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
								result.push(value)
							}
						})
					}
					this.list = result
				},100)
			}
		},
		mounted(){
			this.scroll = new BScroll(this.$refs.search)
		},
		methods:{
			handleCityClick(city){
//				alert(city)
//				this.$store.dispatch('changeCity',city)	//带 action 的调用方式
//				this.$store.commit('changeCity',city)	//直接调用 commit 的调用方式
				this.changeCity(city) //简化调用方式
				
				this.$router.push('/')
			},
			...mapMutations([
				'changeCity'
			])
		}
		
	}
</script>

<style lang="stylus" scoped>
@import '~style/varibles.styl'
.search {
	height: .72rem;
	padding: .1rem;
	background: $BG_COLOR;
	margin-top:-.02rem;
	padding-bottom: 0rem;
}
.search-input {
	height: .62rem;
	line-height: .62rem;
	text-align: center;
	width: 100%;
	border-radius: .06rem;
	color:#666;
	padding: 0 .1rem;
	box-sizing: border-box;
}
.search-content {
	position: absolute;
	top: 1.58rem;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: #eee;
	z-index: 1;
	margin-top: .05rem;
	
	.search-item{
		line-height: .62rem;
		padding-left: .2rem;
		color: #666;
		background: #fff;
	}
}
</style>